Question: How can we customize Bar Chart Tooltips to display series Value and Pct? (Like Pie Charts)
I've scoured Focal Point and the most current WF8 Charting manuals and could find nothing on having an option for TOOLTIPS to add the percentage for the summed value for each bar as it does automatically for pie chart slices.
In WF8, we can now format and style tooltips and even add some text using HTML tooltips and/or JS Callback coding but no option to add (percentage) so that if your are summing SALES, you can display not only the SALES total for that bar but also see the Pct in parens just like how the Pie chart does it.

Has anyone been able to pull this off and if you have, can you provide an example using the CAR db?

This message has been edited. Last edited by: <Kathryn Henning>,

You mean like this?

ENGINE INT CACHE SET ON

-DEFAULTH &WF_STYLE_UNITS='PIXELS';
-DEFAULTH &WF_STYLE_HEIGHT='405.0';
-DEFAULTH &WF_STYLE_WIDTH='770.0';

-DEFAULTH &WF_TITLE='WebFOCUS Report';
GRAPH FILE ibisamp/car
SUM CAR.BODY.SALES
BY CAR.COMP.CAR
WHERE CAR.BODY.SALES GT 0;
ON GRAPH PCHOLD FORMAT JSCHART
ON GRAPH SET HTMLENCODE ON
ON GRAPH SET GRAPHDEFAULT OFF
ON GRAPH SET ARGRAPHENGIN JSCHART
ON GRAPH SET VZERO OFF
ON GRAPH SET UNITS &WF_STYLE_UNITS
ON GRAPH SET HAXIS &WF_STYLE_WIDTH
ON GRAPH SET VAXIS &WF_STYLE_HEIGHT
ON GRAPH SET GRMERGE ADVANCED
ON GRAPH SET GRMULTIGRAPH 0
ON GRAPH SET GRLEGEND 0
ON GRAPH SET GRXAXIS 1
ON GRAPH SET LOOKGRAPH VBAR
ON GRAPH SET AUTOFIT ON
ON GRAPH SET STYLE *
INCLUDE=IBFS:/FILE/IBI_HTML_DIR/javaassist/intl/EN/ENIADefault_combine.sty,$
TYPE=REPORT, TITLETEXT=&WF_TITLE.QUOTEDSTRING, $
*GRAPH_SCRIPT
setReportParsingErrors(false);
setSelectionEnableMove(false);
*END
*GRAPH_JS
htmlToolTip: {
	enabled: true,
-*    snap: true,
    style: {
		border: 'solid black',
		background: '#99FFCC',
	},
},
series: [
		{
		 	series: 'reset',
			pattern: 6,
			tooltip: function(d, s, g)
			{
				var allTitles = 'Series,Car,Model';
				var totalColor = '';
				var totalColorClose = '';

				//get raw series label
				var str = this.getSeries(s).label;
				//create an array from the series label.
				var res = str.split(": ");
				var titles = allTitles.split(",");
				//get the total of all groups.

				//if data value is under 10000, then turn red.
				if(d<10000)
				{
					totalColor = '<font color=\'red\'><b>';
					totalColorClose = '</b></font>';
				}
				//if data value is above 30000, then turn blue.
				else if(d>30000)
				{
					totalColor = '<font color=\'blue\'><b>';
					totalColorClose = '</b></font>';
				}

				//build the look of the ToolTip
				var tabData = '<table style=\'border: 1px dotted blue\'>';

				for(var i = 0; i < res.length; i++)
					tabData += '<tr><td style=\'\'><b>' + titles[i] + ':</b></td><td style=\'\'>' + res[i] + '</td></tr>';

				tabData += '<tr><td style=\'\'><b>Total:</b></td><td style=\'\'>' + totalColor + '$' + this.formatNumber(d, '#,#') + totalColorClose + '</td></tr>';
				tabData += '<tr><td style=\'\'><b>Group:</b></td><td style=\'\'>' + this.groupLabels[g] + '</td></tr>';
				tabData += '</table>';
				return tabData;
			}
		},
]
*END
ENDSTYLE
END

-RUN

I don't think Percentage works with Bar Charts. I've attempted it, but with no success.

Nice custom formatting on the Tooltip, Gavin! Hopefully, someone else has solved this. Thanks.

I think I have a solution, but still working on it. It's based on putting the total into a hold file as well as all fields needed, then building a define that has all the columns needed for the tooltip.

C'mon Mr. Smith!!! You are a creative guy!!!

  
ENGINE INT CACHE SET ON

-DEFAULTH &WF_STYLE_UNITS='PIXELS';
-DEFAULTH &WF_STYLE_HEIGHT='405.0';
-DEFAULTH &WF_STYLE_WIDTH='770.0';

-DEFAULTH &WF_TITLE='WebFOCUS Report';
TABLE FILE IBISAMP/CAR
SUM
    CAR.BODY.SALES
WHERE CAR.BODY.SALES GT 0;
 ON TABLE SAVE
END
-RUN
-READ SAVE &SALES.I6.
-*-TYPE &SALES
-*-EXIT
GRAPH FILE IBISAMP/CAR
SUM CAR.BODY.SALES
BY CAR.COMP.CAR
WHERE CAR.BODY.SALES GT 0;
ON GRAPH PCHOLD FORMAT JSCHART
ON GRAPH SET HTMLENCODE ON
ON GRAPH SET GRAPHDEFAULT OFF
ON GRAPH SET ARGRAPHENGIN JSCHART
ON GRAPH SET VZERO OFF
ON GRAPH SET UNITS &WF_STYLE_UNITS
ON GRAPH SET HAXIS &WF_STYLE_WIDTH
ON GRAPH SET VAXIS &WF_STYLE_HEIGHT
ON GRAPH SET GRMERGE ADVANCED
ON GRAPH SET GRMULTIGRAPH 0
ON GRAPH SET GRLEGEND 0
ON GRAPH SET GRXAXIS 1
ON GRAPH SET LOOKGRAPH VBAR
ON GRAPH SET AUTOFIT ON
ON GRAPH SET STYLE *
-*INCLUDE=IBFS:/FILE/IBI_HTML_DIR/javaassist/intl/EN/ENIADefault_combine.sty,$
TYPE=REPORT, TITLETEXT=&WF_TITLE.QUOTEDSTRING, $
*GRAPH_SCRIPT
setReportParsingErrors(false);
setSelectionEnableMove(false);
*END
*GRAPH_JS
htmlToolTip: {
	enabled: true,
-*    snap: true,
    style: {
		border: 'solid black',
		background: '#99FFCC',
	},
},
series: [
		{
		 	series: 'reset',
			pattern: 6,
			tooltip: function(d, s, g)
			{
				var allTitles = 'Series,Car,Model';
				var totalColor = '';
				var totalColorClose = '';

				//get raw series label
				var str = this.getSeries(s).label;
				//create an array from the series label.
				var res = str.split(": ");
				var titles = allTitles.split(",");
				//get the total of all groups.
                //    var sum = pv.sum(this.data[g], function(el){return el;});
				//if data value is under 10000, then turn red.
				if(d<10000)
				{
					totalColor = '<font color=\'red\'>[b]';
					totalColorClose = '[/b]</font>';
				}
				//if data value is above 30000, then turn blue.
				else if(d>30000)
				{
					totalColor = '<font color=\'blue\'>[b]';
					totalColorClose = '[/b]</font>';
				}

				//build the look of the ToolTip
				var tabData = '<table style=\'border: 1px dotted blue\'>';

				for(var i = 0; i < res.length; i++)
					tabData += '<tr><td style=\'\'>[b]' + titles[i] + ':[/b]</td><td style=\'\'>' + res[i] + '</td></tr>';

				tabData += '<tr><td style=\'\'>[b]Total:[/b]</td><td style=\'\'>' + totalColor + '$' + this.formatNumber(d, '#,#') + totalColorClose + '</td></tr>';
				tabData += '<tr><td style=\'\'>[b]Group:[/b]</td><td style=\'\'>' + this.groupLabels[g] + '</td></tr>';
                tabData += '<tr><td style=\'\'>[b]Percentage:[/b]</td><td style=\'\'>' + this.formatNumber(d / &SALES,'###.##%') + ' in ' + this.groupLabels[g] + '</td></tr>';
				tabData += '</table>';
				return tabData;
			}
		},
]
*END
ENDSTYLE
END
-RUN
-EXIT

Sample

Above is the link to a sample that I plagiarized...

Here is another way...

  
GRAPH FILE IBISAMP/CAR
SUM CAR.BODY.SALES
BY CAR.COMP.CAR
WHERE CAR.BODY.SALES GT 0;
ON GRAPH PCHOLD FORMAT JSCHART
ON GRAPH SET HTMLENCODE ON
ON GRAPH SET GRAPHDEFAULT OFF
ON GRAPH SET ARGRAPHENGIN JSCHART
ON GRAPH SET VZERO OFF
ON GRAPH SET GRMERGE ADVANCED
ON GRAPH SET GRMULTIGRAPH 0
ON GRAPH SET GRLEGEND 0
ON GRAPH SET GRXAXIS 1
ON GRAPH SET LOOKGRAPH VBAR
ON GRAPH SET AUTOFIT ON
ON GRAPH SET STYLE *
*GRAPH_SCRIPT
setReportParsingErrors(false);
setSelectionEnableMove(false);
*END
*GRAPH_JS
series: [
{ "series": 'reset',
	"tooltip": function(d,s,g){
	    var valueArr = this.data[0],total=0;
		    for (var i=0 ;i<valueArr.length;i++){total+=valueArr[i].value;}
                           var sum= d / total * 100 ;
	return this.getSeries(s).label + " For " +this.getGroupLabel(g)+': '+ this.formatNumber(d, '$#,#')+ '<br>'+' Percent of Total ' +this.getSeries(s).label + ': '+sum.toFixed(2) + "%";
 	 }
  },
]

*END
ENDSTYLE
END

Hi Nick,
VERY GOOD! Much cleaner!

added this to get the values on top:

  
setDisplay(getDataTextStackedTotalOnTop(), true);
setDataTextPosition(1);
setDataTextDisplay(false);
setDisplay(getDataText(0), true);

Searched on GRAPH_JS in the Technical Library and lots of info; I am new to the GRAPH_JS syntax, so, thanks!

Tom

yea, I was just over thinking it.. I wasn't FOCUSed.. :P

@Nick - When I run the same fex as yours, the graph renders but the last line of the tooltip says:
'Percent of Total SALES: NaN%'.

As far as I can tell tracing back in the JavaScript this line, isn't yielding a valid array: valueArr = this.data[0]

This message has been edited. Last edited by: David Briars,

It's based on what your second column is. Is it a numeric field? In nick's example, SUM CAR.BODY.SALES is the second field.

Hi Gavin,

I am using the same exact code as Nick, so yes the second column is numeric, it is SALES which is an I6 in the MFD.

Dave

I'm getting same result as David Briars, NaN for the percentage in the ToolTip using Nick's code.

And Tom, who said I was smart? Nice code on figuring it out. Thanks for your input, pal.

David

This message has been edited. Last edited by: DavSmith,

If you are getting NaN, you need to be on a 8.1 version; didn't work for me in 8.0.07, use the &VARIABLE concept if not on a 8.1 version.

Additionally, need to change the

 [b] and [/b] to <b> and </b> 
  

the forum changes these...

Hey Dave, I KNOW you are smart, having a bit of fun!
Hope all is well at Brinker!
Tom

This message has been edited. Last edited by: Tom Flynn,

Tom, us old Focus coders are all on the down low so it's all good!

No longer at Brinker...I've moved on to Chrome River. Doing and learning some very cool things in WF there.

And thanks for tip on 8.1 vs 8.0. Your code does work in our 8.0 prod environment.

Take care.

David

Yea, we are a dying breed.
Well, Brinker misses you, I'm sure. You may not miss them, though...
Glad you are still in the WebFOCUS World!

This message has been edited. Last edited by: Tom Flynn,

@David Briars,
Sorry about that.
I always assume the latest production release, which right now is WF8105.
I should remember to mention it when I post my code.

Here is a code that would work in WF800x release:

GRAPH FILE IBISAMP/CAR
SUM CAR.BODY.SALES
BY CAR.COMP.CAR
WHERE CAR.BODY.SALES GT 0;
ON GRAPH PCHOLD FORMAT JSCHART
ON GRAPH SET HTMLENCODE ON
ON GRAPH SET GRAPHDEFAULT OFF
ON GRAPH SET ARGRAPHENGIN JSCHART
ON GRAPH SET VZERO OFF
ON GRAPH SET GRMERGE ADVANCED
ON GRAPH SET GRMULTIGRAPH 0
ON GRAPH SET GRLEGEND 0
ON GRAPH SET GRXAXIS 1
ON GRAPH SET LOOKGRAPH VBAR
ON GRAPH SET AUTOFIT ON
ON GRAPH SET STYLE *
*GRAPH_SCRIPT
setReportParsingErrors(false);
setSelectionEnableMove(false);
*END
*GRAPH_JS
series: [
{ "series": 'reset',
	"tooltip": function(d,s,g){
	    var valueArr = this.data[0],total=0;
		    for (var i=0 ;i<valueArr.length;i++){total+=valueArr[i];}
                           var sum= d / total * 100 ;
debugger;
	return this.getSeries(s).label + " For " +this.getGroupLabel(g)+': '+ this.formatNumber(d, '$#,#')+ '<br>'+' Percent of Total ' +this.getSeries(s).label + ': '+sum.toFixed(2)+ "%";
 	 }
  },
]

*END
ENDSTYLE
END

Basically the only change is to remove .value from valueArr[i].value

Everything else is the same.

Thanks.
Nick.

Thank you Nick.

The updated sample works like a champ in my 8.0.07 environment.

Yep, works great in 8.0, breaks in 8.1...
So, if you use this API, you'll have to remember to fix in it in all programs where utilized in 8.1.
Sad IBI, very sad!!! Get tired of basic things not being passed to the next version and having to fix.
My concept works in both versions...
Your choice...

This message has been edited. Last edited by: Tom Flynn,

What does this return in 8.0?

var sum = pv.sum(this.data[g], function(el){return el;});

@Gavin-

var sum = pv.sum(this.data[g], function(el){return el;});
alert(sum);  

Returns a message box with the value 208420 (the total SALES) in 8.0.07.

Does it work the same in 8.1.x?

Confirmed the new Nick Z mod works in 8.009. Thanks to Tom for testing 8.1. Since we are moving to that soon, it's good to know it does not work there.

Can anyone hazard a guess as to what changed in 8.1 from 8.0 to makes it not work? At least Tom's code works in both versions.

quote:

Basically the only change is to remove .value from valueArr[i].value

Everything else is the same.

David,
Nick gave the above explanation in his new code for 8.0.
I would also assume IBI changed the JS module...
Tom

quote:

var sum = pv.sum(this.data[g], function(el){return el;});
alert(sum);

Returns a message box with the value 208420 (the total SALES) in 8.0.07.

Does it work the same in 8.1.x?

@David, no.. Which is why I had changed my example on my original page to work the other way.. I didn't realize that didn't work with 8.0. arrrggg..

Excellent thread everyone.

Here is an example posting the percentage of total within the risers, as well as, the tooltips:

-* File tooltipcalculation.fex
-*
-* Get Total Sales
-*
TABLE FILE CAR
SUM SALES AS 'Sales'
ON TABLE SAVE AS SVSALES
END
-RUN
-READ SVSALES &SALESTOTAL.A6.
-*
-* Create Graph
-*
GRAPH FILE IBISAMP/CAR
SUM   CAR.BODY.SALES 
BY    CAR.COMP.CAR
WHERE CAR.BODY.SALES GT 0;
ON GRAPH PCHOLD FORMAT JSCHART
ON GRAPH SET HTMLENCODE ON
ON GRAPH SET GRAPHDEFAULT OFF
ON GRAPH SET ARGRAPHENGIN JSCHART
ON GRAPH SET VZERO OFF
ON GRAPH SET GRMERGE ADVANCED
ON GRAPH SET GRMULTIGRAPH 0
ON GRAPH SET GRLEGEND 0
ON GRAPH SET GRXAXIS 1
ON GRAPH SET LOOKGRAPH VBAR
ON GRAPH SET AUTOFIT ON
ON GRAPH SET STYLE *
  INCLUDE = warm, $
-* Graph Titles.  
*GRAPH_JS
  title: {text: 'International Car Sales', visible: true},
  subtitle: {text: 'Sales Across Car', visible: true},
  yaxis: {title: {visible: true, text:'Sales'}},
  xaxisOrdinal: {title: {visible: true, text:'Car'}}
*END
-* Tooltip and Datalabels.  
*GRAPH_JS
 series: [
  {"series": 'reset', showDataValues:true,
    "tooltip": function(d,s,g) {
                var sum= d / &SALESTOTAL * 100 ;
                ttmessage  = '[b]' + this.getSeries(s).label + " For " + this.getGroupLabel(g)+'[/b]: ';
                ttmessage += this.formatNumber(d, '$#,#')+ '<br>[b]' + ' Percent of Total ';
                ttmessage += this.getSeries(s).label + '[/b]: '+sum.toFixed(2)+ "%";
                return ttmessage;
               }
  },
 ],
 dataLabels: { visible: true,
               color:'white',
               font: 'Bold 12pt Sans-Serif',
               position: 'inside',
               displayMode: 'seriesLabel',
               formatCallback: function(d, s, g) {
                                var sum= d / &SALESTOTAL * 100 ;
                                dlmessage = sum.toFixed(2)+ "%";
                                return dlmessage;
                               }
 }
*END
ENDSTYLE
END
-EXIT

This message has been edited. Last edited by: David Briars,

Thanks to all for their input. Our final solution for adding the PCT to the Bar Chart tooltip:

-* File tooltipcalculation.fex
-*
-* Get Total Sales
-*
TABLE FILE CAR
SUM SALES AS 'Sales'
ON TABLE SAVE AS SVSALES
END
-RUN
-READ SVSALES &SALESTOTAL.A6.
-*
-* Create Graph
-*
GRAPH FILE IBISAMP/CAR
SUM   CAR.BODY.SALES 
BY    CAR.COMP.CAR
WHERE CAR.BODY.SALES GT 0;
ON GRAPH PCHOLD FORMAT JSCHART
ON GRAPH SET HTMLENCODE ON
ON GRAPH SET GRAPHDEFAULT OFF
ON GRAPH SET ARGRAPHENGIN JSCHART
ON GRAPH SET VZERO OFF
ON GRAPH SET GRMERGE ADVANCED
ON GRAPH SET GRMULTIGRAPH 0
ON GRAPH SET GRLEGEND 0
ON GRAPH SET GRXAXIS 1
ON GRAPH SET LOOKGRAPH VBAR
ON GRAPH SET AUTOFIT ON
ON GRAPH SET STYLE *
-*  INCLUDE = warm, $
-* Graph Titles.  
*GRAPH_JS
  title: {text: 'International Car Sales', visible: true},
  subtitle: {text: 'Sales Across Car', visible: true},
  yaxis: {title: {visible: true, text:'Sales'}},
  xaxisOrdinal: {title: {visible: true, text:'Car'}}
*END
-* Tooltip and Datalabels.  
*GRAPH_JS
series: [
    { "series": 'reset',
        "tooltip": function(d,s,g){
            var valueArr = this.data[0],total=0;
            for (var i=0 ;i<valueArr.length;i++){total+=isNaN(valueArr[i])?valueArr[i].value:valueArr[i];}
            var sum= d / total * 100 ;
            debugger;
            return this.getSeries(s).label + " for " + this.getGroupLabel(g)+': '+ this.formatNumber(d, '$#,#') + '<br>Percent of Total ' + this.getSeries(s).label + ': ' + sum.toFixed(2) + "%";
        }
    },
]
*END
ENDSTYLE
END

Thanks for the follow up, Dave.

Nice use of the isNaN JavaScript function, to handle the array values.

I knew he was creative!

quote:

Originally posted by nick z:
Here is another way...

  
GRAPH FILE IBISAMP/CAR
SUM CAR.BODY.SALES
BY CAR.COMP.CAR
WHERE CAR.BODY.SALES GT 0;
ON GRAPH PCHOLD FORMAT JSCHART
ON GRAPH SET HTMLENCODE ON
ON GRAPH SET GRAPHDEFAULT OFF
ON GRAPH SET ARGRAPHENGIN JSCHART
ON GRAPH SET VZERO OFF
ON GRAPH SET GRMERGE ADVANCED
ON GRAPH SET GRMULTIGRAPH 0
ON GRAPH SET GRLEGEND 0
ON GRAPH SET GRXAXIS 1
ON GRAPH SET LOOKGRAPH VBAR
ON GRAPH SET AUTOFIT ON
ON GRAPH SET STYLE *
*GRAPH_SCRIPT
setReportParsingErrors(false);
setSelectionEnableMove(false);
*END
*GRAPH_JS
series: [
{ "series": 'reset',
	"tooltip": function(d,s,g){
	    var valueArr = this.data[0],total=0;
		    for (var i=0 ;i<valueArr.length;i++){total+=valueArr[i].value;}
                           var sum= d / total * 100 ;
	return this.getSeries(s).label + " For " +this.getGroupLabel(g)+': '+ this.formatNumber(d, '$#,#')+ '<br>'+' Percent of Total ' +this.getSeries(s).label + ': '+sum.toFixed(2) + "%";
 	 }
  },
]

*END
ENDSTYLE
END

Thank you! This saved my bacon today.

quote:

Originally posted by David Briars:
Thanks for the follow up, Dave.

Nice use of the isNaN JavaScript function, to handle the array values.

isNaN function did not work for me. For some reason My values were passed as Text and the Tooltip displayed it as NAN%.
to get around it I had to convert it to number first.

 
var valueArr = this.data[1],total=0;
for (var i=0 ;i<valueArr.length;i++){
	var isnum = parseFloat(valueArr[i]);
	total+=isnum;
}